<!DOCTYPE html><html><head>
      <title>sys_README</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="file:///c:\Users\Movie\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.6.2\node_modules\@shd101wyy\mume\dependencies\katex\katex.min.css">
      
      
      
      
      
      
      
      
      
      <style>
      /**
 * prism.js Github theme based on GitHub's theme.
 * @author Sam Clarke
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #333;
  background: none;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: .8em;
  overflow: auto;
  /* border: 1px solid #ddd; */
  border-radius: 3px;
  /* background: #fff; */
  background: #f5f5f5;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
  background: #f5f5f5;
}

.token.comment,
.token.blockquote {
  color: #969896;
}

.token.cdata {
  color: #183691;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #333;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.builtin {
  color: #a71d5d;
}

.token.string,
.token.url,
.token.regex,
.token.attr-value {
  color: #183691;
}

.token.property,
.token.number,
.token.boolean,
.token.entity,
.token.atrule,
.token.constant,
.token.symbol,
.token.command,
.token.code {
  color: #0086b3;
}

.token.tag,
.token.selector,
.token.prolog {
  color: #63a35c;
}

.token.function,
.token.namespace,
.token.pseudo-element,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.id,
.token.url-reference .token.variable,
.token.attr-name {
  color: #795da3;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
  color: #1d3e81;
}

.token.list {
  color: #ed6a43;
}

.token.inserted {
  background-color: #eaffea;
  color: #55a532;
}

.token.deleted {
  background-color: #ffecec;
  color: #bd2c00;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}


/* JSON */
.language-json .token.property {
  color: #183691;
}

.language-markup .token.tag .token.punctuation {
  color: #333;
}

/* CSS */
code.language-css,
.language-css .token.function {
  color: #0086b3;
}

/* YAML */
.language-yaml .token.atrule {
  color: #63a35c;
}

code.language-yaml {
  color: #183691;
}

/* Ruby */
.language-ruby .token.function {
  color: #333;
}

/* Markdown */
.language-markdown .token.url {
  color: #795da3;
}

/* Makefile */
.language-makefile .token.symbol {
  color: #795da3;
}

.language-makefile .token.variable {
  color: #183691;
}

.language-makefile .token.builtin {
  color: #0086b3;
}

/* Bash */
.language-bash .token.keyword {
  color: #0086b3;
}

/* highlight */
pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
}
pre[data-line] .line-highlight-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: block;
  width: 100%;
}

pre[data-line] .line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  background: hsla(24, 20%, 50%,.08);
  background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}

pre[data-line] .line-highlight:before, 
pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: .4em;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  background-color: hsla(24, 20%, 50%,.4);
  color: hsl(24, 20%, 95%);
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: .3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white;
}

pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: .4em;
}html body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ul,html body>ol{margin-bottom:16px}html body ul,html body ol{padding-left:2em}html body ul.no-list,html body ol.no-list{padding:0;list-style-type:none}html body ul ul,html body ul ol,html body ol ol,html body ol ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;background-color:#f0f0f0;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:bold;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em !important;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::before,html body code::after{letter-spacing:-0.2em;content:"\00a0"}html body pre>code{padding:0;margin:0;font-size:.85em !important;word-break:normal;white-space:pre;background:transparent;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;font-size:.85em !important;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:before,html body pre tt:before,html body pre code:after,html body pre tt:after{content:normal}html body p,html body blockquote,html body ul,html body ol,html body dl,html body pre{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body pre,html body code{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview .pagebreak,.markdown-preview .newpage{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center !important}.markdown-preview:not([for="preview"]) .code-chunk .btn-group{display:none}.markdown-preview:not([for="preview"]) .code-chunk .status{display:none}.markdown-preview:not([for="preview"]) .code-chunk .output-div{margin-bottom:16px}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0}@media screen and (min-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px + 2em)}}@media screen and (max-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{font-size:14px !important;padding:1em}}@media print{html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,0.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{padding:0 1.6em;margin-top:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li{margin-bottom:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{list-style-type:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% -  300px);padding:2em calc(50% - 457px -  150px);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

      </style>
    </head>
    <body for="html-export">
      <div class="mume markdown-preview  ">
      <h1 class="mume-header" id="tov-template">tov-template</h1>

<p>&#x4E00;&#x4E2A; <code>vite + vue3 + ts</code> &#x5F00;&#x7BB1;&#x5373;&#x7528;&#x73B0;&#x4EE3;&#x5F00;&#x53D1;&#x6A21;&#x677F;</p>
<br>
<br>
<h2 class="mume-header" id="%E7%89%B9%E7%82%B9">&#x7279;&#x70B9; &#x1F433;</h2>

<ol>
<li>Vite &#x7684;</li>
<li>Vue3 &#x7684;</li>
<li>&#x6587;&#x4EF6;&#x8DEF;&#x7531;</li>
<li>&#x5E03;&#x5C40;&#x7CFB;&#x7EDF;</li>
<li>Mock &#x652F;&#x6301;</li>
<li>Api &#x81EA;&#x52A8;&#x5F15;&#x5165;</li>
<li>&#x7EC4;&#x4EF6;&#x81EA;&#x52A8;&#x5F15;&#x5165;</li>
<li>&#x56FE;&#x6807;&#x81EA;&#x52A8;&#x5F15;&#x5165;</li>
<li>VueUse &#x652F;&#x6301;</li>
<li>TypeScript &#x7684;</li>
<li>Windi CSS &#x7684;</li>
<li>&#x6697;&#x9ED1;&#x6A21;&#x5F0F;&#x652F;&#x6301;</li>
<li>SWR &#x8BF7;&#x6C42;&#x652F;&#x6301;</li>
<li>pinia &#x72B6;&#x6001;&#x7BA1;&#x7406;</li>
<li>pnpm &#x5305;&#x7BA1;&#x7406;&#x5668;</li>
<li>&#x8DF3;&#x8F6C;&#x8FDB;&#x5EA6;&#x6761;&#x652F;&#x6301;</li>
<li>Inspect &#x8C03;&#x8BD5;&#x652F;&#x6301;</li>
<li>&#x63D2;&#x4EF6;&#x81EA;&#x52A8;&#x52A0;&#x8F7D;&#x652F;&#x6301;</li>
<li>Vitest &#x5355;&#x5143;&#x6D4B;&#x8BD5;&#x652F;&#x6301;</li>
<li>&#x652F;&#x6301; Markdown &#x6E32;&#x67D3;</li>
<li>&#x8DEF;&#x5F84;&#x522B;&#x540D; <code>~</code> &#x652F;&#x6301;</li>
<li>&#x547D;&#x4EE4;&#x884C;&#x81EA;&#x52A8;&#x521B;&#x5EFA;&#x4E0E;&#x5220;&#x9664;</li>
<li>i18n &#x56FD;&#x9645;&#x5316;&#x652F;&#x6301;</li>
<li>&#x6F02;&#x4EAE;&#x7684; 404&#x9875; &#x652F;&#x6301;</li>
<li>tsx &#x652F;&#x6301;</li>
<li>gzip &#x8D44;&#x6E90;&#x538B;&#x7F29;&#x652F;&#x6301;</li>
<li>&#x73AF;&#x5883;&#x53D8;&#x91CF;&#x914D;&#x7F6E;&#x652F;&#x6301;</li>
</ol>
<br>
<br>
<h2 class="mume-header" id="%E5%85%8B%E9%9A%86%E6%A8%A1%E6%9D%BF">&#x514B;&#x9686;&#x6A21;&#x677F; &#x1F995;</h2>

<ol>
<li>Github</li>
</ol>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">git</span> clone git@github.com:dishait/tov-template.git
</pre><ol start="2">
<li>Gitee</li>
</ol>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">git</span> clone git@gitee.com:dishait/tov-template.git
</pre><ol start="3">
<li>degit</li>
</ol>
<pre data-role="codeBlock" data-info="shell" class="language-shell">npx degit https://github.com/dishait/tov-template<span class="token comment">#main</span>
</pre><ol start="4">
<li>&#x65B0;&#x7684; <code>Github</code> &#x4ED3;&#x5E93; &#x1F449; <a href="https://github.com/dishait/tov-template/generate">Use this template</a></li>
</ol>
<br>
<br>
<br>
<h2 class="mume-header" id="node-%E7%89%88%E6%9C%AC%E6%8E%A8%E8%8D%90"><code>node</code> &#x7248;&#x672C;&#x63A8;&#x8350; &#x1F40E;</h2>

<p>&#x56E0;&#x4E3A;&#x8BE5;&#x6A21;&#x677F;&#x5B8C;&#x5168;&#x9762;&#x5411;&#x73B0;&#x4EE3;&#xFF0C;&#x6240;&#x4EE5;&#x63A8;&#x8350;&#x5927;&#x5BB6;&#x4F7F;&#x7528; <code>node</code> &#x5F53;&#x524D;&#x7684;&#x957F;&#x671F;&#x7EF4;&#x62A4;&#x7248;&#x672C; <code>v16</code>&#xFF0C; &#x5927;&#x4E8E; <code>v16.13.1</code> &#x5373;&#x53EF;&#x3002;</p>
<br>
<br>
<br>
<h2 class="mume-header" id="%E4%BD%BF%E7%94%A8">&#x4F7F;&#x7528; &#x1F402;</h2>

<blockquote>
<p>&#x8BE5;&#x6A21;&#x677F;&#x4E0D;&#x9650;&#x5B9A;&#x5927;&#x5BB6;&#x4F7F;&#x7528;&#x67D0;&#x4E00;&#x7279;&#x5B9A;&#x7684;&#x5305;&#x7BA1;&#x7406;&#x5668;&#xFF0C;npm&#xFF0C;yarn &#x548C; pnpm &#x90FD;&#x884C;&#x3002;&#x540C;&#x65F6;&#x6CE8;&#x610F; npm &#x7684;&#x7248;&#x672C;&#x5E94;&#x8BE5;&#x5C3D;&#x91CF;&#x7684;&#x65B0;&#x3002;</p>
</blockquote>
<p>&#x5F3A;&#x70C8;&#x63A8;&#x8350;&#x5927;&#x5BB6;&#x4F7F;&#x7528;&#x66F4;&#x5FEB;&#x66F4;&#x5408;&#x7406;&#x7684; <code>pnpm</code> &#x5305;&#x7BA1;&#x7406;&#x5668; &#x1F449; <a href="https://pnpm.io/zh/installation">&#x5B89;&#x88C5;&#x6559;&#x7A0B;</a></p>
<ol>
<li>&#x5B89;&#x88C5;&#x4F9D;&#x8D56;</li>
</ol>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> <span class="token function">install</span>

<span class="token comment"># &#x6216;&#x8005; npm install</span>
<span class="token comment"># &#x6216;&#x8005; yarn</span>
</pre><ol start="2">
<li>&#x5F00;&#x53D1;</li>
</ol>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> dev 

<span class="token comment"># &#x6216;&#x8005; npm run dev</span>
<span class="token comment"># &#x6216;&#x8005; yarn dev</span>

<span class="token comment"># &#x5F00;&#x542F; host</span>
<span class="token function">pnpm</span> dev:host  

<span class="token comment"># &#x6216;&#x8005; npm run dev:host </span>
<span class="token comment"># &#x6216;&#x8005; yarn dev:host</span>

<span class="token comment"># &#x81EA;&#x52A8;&#x6253;&#x5F00;&#x6D4F;&#x89C8;&#x5668;</span>
<span class="token function">pnpm</span> dev:open

<span class="token comment"># &#x6216;&#x8005; npm run dev:open</span>
<span class="token comment"># &#x6216;&#x8005; yarn dev:open</span>
</pre><ol start="3">
<li>&#x9884;&#x89C8;</li>
</ol>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> preview

<span class="token comment"># &#x6216;&#x8005; npm run preview</span>
<span class="token comment"># &#x6216;&#x8005; yarn preview</span>

<span class="token comment"># &#x5F00;&#x542F; host</span>
<span class="token function">pnpm</span> preview:host

<span class="token comment"># &#x6216;&#x8005; npm run preview:host</span>
<span class="token comment"># &#x6216;&#x8005; yarn preview:host</span>

<span class="token comment"># &#x81EA;&#x52A8;&#x6253;&#x5F00;&#x6D4F;&#x89C8;&#x5668;</span>
<span class="token function">pnpm</span> preview:open

<span class="token comment"># &#x6216;&#x8005; npm run preview:open</span>
<span class="token comment"># &#x6216;&#x8005; yarn preview:open</span>
</pre><ol start="4">
<li>&#x6253;&#x5305;</li>
</ol>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> build

<span class="token comment"># &#x6216;&#x8005; npm run build</span>
<span class="token comment"># &#x6216;&#x8005; yarn build</span>
</pre><ol start="5">
<li>&#x5355;&#x5143;&#x6D4B;&#x8BD5;</li>
</ol>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> <span class="token builtin class-name">test</span>

<span class="token comment"># &#x6216;&#x8005; npm run test</span>
<span class="token comment"># &#x6216;&#x8005; yarn test</span>
</pre><ol start="6">
<li>&#x5355;&#x5143;&#x6D4B;&#x8BD5;&#x62A5;&#x544A;&#x751F;&#x6210;</li>
</ol>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> coverage

<span class="token comment"># &#x6216;&#x8005; npm run coverage</span>
<span class="token comment"># &#x6216;&#x8005; yarn coverage</span>
</pre><ol start="7">
<li>&#x6837;&#x5F0F;&#x62A5;&#x544A;&#x9884;&#x89C8;</li>
</ol>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> analysis

<span class="token comment"># &#x6216;&#x8005; npm run analysis</span>
<span class="token comment"># &#x6216;&#x8005; yarn analysis</span>
</pre><ol start="8">
<li>&#x6837;&#x5F0F;&#x62A5;&#x544A;&#x6253;&#x5305;</li>
</ol>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> analysis:build

<span class="token comment"># &#x6216;&#x8005; npm run analysis:build</span>
<span class="token comment"># &#x6216;&#x8005; yarn analysis:build</span>
</pre><ol start="9">
<li>&#x7C7B;&#x578B;&#x68C0;&#x67E5;</li>
</ol>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> typecheck

<span class="token comment"># &#x6216;&#x8005; npm run typecheck</span>
<span class="token comment"># &#x6216;&#x8005; yarn typecheck</span>
</pre><ol start="10">
<li>&#x81EA;&#x52A8;&#x521B;&#x5EFA;</li>
</ol>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> auto:create

<span class="token comment"># &#x6216;&#x8005; npm run auto:create</span>
<span class="token comment"># &#x6216;&#x8005; yarn auto:create</span>
</pre><ol start="11">
<li>&#x81EA;&#x52A8;&#x79FB;&#x9664;</li>
</ol>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> auto:remove

<span class="token comment"># &#x6216;&#x8005; npm run auto:remove</span>
<span class="token comment"># &#x6216;&#x8005; yarn auto:remove</span>
</pre><ol start="12">
<li>&#x4F9D;&#x8D56;&#x66F4;&#x65B0;</li>
</ol>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token comment"># &#x5B89;&#x5168;&#x7248;&#x672C;&#x66F4;&#x65B0;</span>
<span class="token function">pnpm</span> deps:fresh

<span class="token comment"># &#x6216;&#x8005; npm run deps:fresh</span>
<span class="token comment"># &#x6216;&#x8005; yarn deps:fresh</span>

<span class="token comment"># &#x4E3B;&#x7248;&#x672C;&#x66F4;&#x65B0;&#xFF0C;&#x53EF;&#x80FD;&#x662F;&#x7834;&#x574F;&#x6027;&#x66F4;&#x65B0;&#xFF0C;&#x8C28;&#x614E;&#x4F7F;&#x7528;&#xFF0C;&#x505A;&#x597D;&#x6D4B;&#x8BD5;</span>
<span class="token function">pnpm</span> deps:fresh:major

<span class="token comment"># &#x6216;&#x8005; npm run deps:fresh:major</span>
<span class="token comment"># &#x6216;&#x8005; yarn deps:fresh:major</span>

<span class="token comment"># &#x6B21;&#x7248;&#x672C;&#x66F4;&#x65B0;&#xFF0C;&#x53EF;&#x80FD;&#x662F;&#x7834;&#x574F;&#x6027;&#x66F4;&#x65B0;&#xFF0C;&#x8C28;&#x614E;&#x4F7F;&#x7528;&#xFF0C;&#x505A;&#x597D;&#x6D4B;&#x8BD5;</span>
<span class="token function">pnpm</span> deps:fresh:minor

<span class="token comment"># &#x6216;&#x8005; npm run deps:fresh:minor</span>
<span class="token comment"># &#x6216;&#x8005; yarn deps:fresh:minor</span>

<span class="token comment"># &#x8865;&#x4E01;&#x7248;&#x672C;&#x66F4;&#x65B0;</span>
<span class="token function">pnpm</span> deps:fresh:patch

<span class="token comment"># &#x6216;&#x8005; npm run deps:fresh:patch</span>
<span class="token comment"># &#x6216;&#x8005; yarn deps:fresh:patch</span>
</pre><pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token comment"># &#x4EE5;&#x4E0A;&#x547D;&#x4EE4;&#x4EC5;&#x5BF9;&#x5305;&#x4FE1;&#x606F; package.json &#x8FDB;&#x884C;&#x5199;&#x5165;&#xFF0C;&#x9700;&#x8981;&#x91CD;&#x65B0;&#x6267;&#x884C;&#x5305;&#x5B89;&#x88C5;&#x547D;&#x4EE4;</span>
<span class="token function">pnpm</span> i

<span class="token comment"># &#x6216;&#x8005; npm i</span>
<span class="token comment"># &#x6216;&#x8005; yarn</span>
</pre><br>
<br>
<h2 class="mume-header" id="%E5%8A%A8%E6%9C%BA">&#x52A8;&#x673A; &#x1F417;</h2>

<p>&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x505A;&#x8FD9;&#x4E2A; <strong>&#x6A21;&#x677F;</strong> &#x5462;&#xFF1F;</p>
<ol>
<li>&#x4E3A;&#x4E0B;&#x6B21;&#x5F00;&#x53D1;&#x8282;&#x7701;&#x6D6A;&#x8D39;&#x5728;&#x914D;&#x7F6E;&#x4E0A;&#x7684;&#x65F6;&#x95F4;</li>
<li>&#x7ED3;&#x5408;&#x4E3B;&#x6D41;&#x63D2;&#x4EF6;&#x6574;&#x5408;&#x73B0;&#x4EE3;&#x5F00;&#x53D1;&#x67B6;&#x6784;&#xFF0C;&#x63D0;&#x9AD8;&#x5F00;&#x53D1;&#x6548;&#x7387;</li>
</ol>
<br>
<br>
<h2 class="mume-header" id="%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF">&#x4F7F;&#x7528;&#x573A;&#x666F; &#x1F43B;</h2>

<p>&#x4EC0;&#x4E48;&#x65F6;&#x5019;&#x4F60;&#x5E94;&#x8BE5;&#x7528;?</p>
<ol>
<li>&#x4E0D;&#x60F3;&#x6D6A;&#x8D39;&#x65F6;&#x95F4;&#x5728;&#x9879;&#x76EE;&#x914D;&#x7F6E;&#x4E0A;</li>
<li>&#x5E0C;&#x671B;&#x5C1D;&#x8BD5;&#x7528;&#x66F4;&#x73B0;&#x4EE3;&#x7684;&#x65B9;&#x5F0F;&#x5F00;&#x53D1; <code>web</code> &#x5E94;&#x7528;&#xFF0C;&#x63D0;&#x9AD8;&#x5F00;&#x53D1;&#x6548;&#x7387;</li>
</ol>
<br>
<br>
<h2 class="mume-header" id="%E5%90%AF%E5%8F%91">&#x542F;&#x53D1; &#x1F403;</h2>

<p>&#x8BE5;&#x6A21;&#x677F;&#x53D7; <strong><a href="https://github.com/antfu/vitesse">vitesse</a></strong> &#x542F;&#x53D1;&#xFF0C;&#x5982;&#x679C;&#x4F60;&#x6709; SSG &#x7684;&#x573A;&#x666F;&#xFF0C;&#x90A3;&#x4E48;&#x63A8;&#x8350;&#x4F60;&#x59CB;&#x7EC8;&#x4F7F;&#x7528; <strong><a href="https://github.com/antfu/vitesse">vitesse</a></strong>&#x3002;</p>
<br>
<br>
<h2 class="mume-header" id="%E7%BB%84%E7%BB%87">&#x7EC4;&#x7EC7; &#x1F994;</h2>

<p>&#x6B22;&#x8FCE;&#x5173;&#x6CE8; <strong>&#x5E1D;&#x838E;&#x7F16;&#x7A0B;</strong></p>
<ul>
<li>
<p><a href="http://dishaxy.dishait.cn/">&#x5B98;&#x7F51;</a></p>
</li>
<li>
<p><a href="https://gitee.com/dishait">Gitee</a></p>
</li>
<li>
<p><a href="https://github.com/dishait">Github</a></p>
</li>
<li>
<p><a href="https://study.163.com/provider/480000001892585/index.htm?share=2&amp;shareId=480000001892585">&#x7F51;&#x6613;&#x4E91;&#x8BFE;&#x5802;</a></p>
</li>
</ul>
<br>
<br>
<h2 class="mume-header" id="%E8%AF%A6%E6%83%85">&#x8BE6;&#x60C5; &#x1F433;</h2>

<h3 class="mume-header" id="1-vite-%E7%9A%84httpscnvitejsdev"><a href="https://cn.vitejs.dev/">1. Vite &#x7684;</a></h3>

<p>&#x8BE5;&#x6A21;&#x677F;&#x91C7;&#x7528; <strong><a href="https://cn.vitejs.dev/">vite</a></strong> &#x4F5C;&#x4E3A;&#x6784;&#x5EFA;&#x5DE5;&#x5177;&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x5728;&#x6839;&#x76EE;&#x5F55;&#x4E0B;&#x7684; <code>vite.config.ts</code> &#x5BF9;&#x9879;&#x76EE;&#x7684;&#x6784;&#x5EFA;&#x8FDB;&#x884C;&#x914D;&#x7F6E;&#x3002;</p>
<p>&#x5BF9;&#x4E8E;&#x4F17;&#x591A;&#x4E3B;&#x6D41;&#x63D2;&#x4EF6;&#x7684;&#x5F15;&#x5165;&#x548C;&#x7E41;&#x6742;&#x914D;&#x7F6E;&#x5DF2;&#x7ECF;&#x6574;&#x5408;&#x5230;&#x6839;&#x76EE;&#x5F55;&#x4E0B;&#x7684;&#x9884;&#x8BBE; <code>presets</code> &#x4E2D;&#xFF0C;&#x5927;&#x591A;&#x6570;&#x60C5;&#x51B5;&#x4E0B;&#x4F60;&#x662F;&#x4E0D;&#x9700;&#x8981;&#x91CD;&#x65B0;&#x5BF9;&#x5B83;&#x4EEC;&#x8FDB;&#x884C;&#x914D;&#x7F6E;&#x7684;&#x3002;</p>
<br>
<h3 class="mume-header" id="2-vue3-%E7%9A%84httpsv3cnvuejsorg"><a href="https://v3.cn.vuejs.org/">2. Vue3 &#x7684;</a></h3>

<br>
<h3 class="mume-header" id="3-%E6%96%87%E4%BB%B6%E8%B7%AF%E7%94%B1httpsgithubcomhannoeruvite-plugin-pages"><a href="https://github.com/hannoeru/vite-plugin-pages">3. &#x6587;&#x4EF6;&#x8DEF;&#x7531;</a></h3>

<p>&#x76EE;&#x5F55;&#x7ED3;&#x6784;&#x5373;&#x8DEF;&#x7531;&#x3002;</p>
<p>eg:</p>
<ul>
<li><code>src/pages/index.vue</code> =&gt; <code>/</code></li>
<li><code>src/pages/about.vue</code> =&gt; <code>/about</code></li>
<li><code>src/pages/users/index.vue</code> =&gt; <code>/users</code></li>
<li><code>src/pages/users/profile.vue</code> =&gt; <code>/users/profile</code></li>
<li><code>src/pages/users/[id].vue</code> =&gt; <code>/users/:id</code></li>
<li><code>src/pages/[user]/settings.vue</code> =&gt; <code>/:user/settings</code></li>
<li><code>src/pages/[...notFound].vue</code> =&gt; 404 &#x8DEF;&#x7531;</li>
</ul>
<p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://github.com/hannoeru/vite-plugin-pages#file-system-routing">vite-plugin-pages</a></p>
<br>
<h3 class="mume-header" id="4-%E5%B8%83%E5%B1%80%E7%B3%BB%E7%BB%9Fhttpsgithubcomjohncampionjrvite-plugin-vue-layouts"><a href="https://github.com/JohnCampionJr/vite-plugin-vue-layouts">4. &#x5E03;&#x5C40;&#x7CFB;&#x7EDF;</a></h3>

<h4 class="mume-header" id="%E9%BB%98%E8%AE%A4%E5%B8%83%E5%B1%80">&#x9ED8;&#x8BA4;&#x5E03;&#x5C40;</h4>

<p><code>src/layouts/default.vue</code> &#x5C06;&#x4F5C;&#x4E3A;&#x9ED8;&#x8BA4;&#x5E03;&#x5C40;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- src/layouts/default.vue --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    &#x6211;&#x662F;&#x9ED8;&#x8BA4;&#x5E03;&#x5C40;
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span> <span class="token punctuation">/&gt;</span></span> <span class="token comment">&lt;!-- &#x9875;&#x9762;&#x89C6;&#x56FE;&#x51FA;&#x53E3; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x6B64;&#x65F6; <code>src/pages/index.vue</code></p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- src/pages/index.vue --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>&#x6211;&#x662F;&#x9996;&#x9875;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span> 
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x8DEF;&#x7531;&#x5230; <code>/</code>&#x65F6;&#xFF0C;&#x9875;&#x9762;&#x5C06;&#x6E32;&#x67D3;</p>
<pre data-role="codeBlock" data-info="html" class="language-html">&#x6211;&#x662F;&#x9ED8;&#x8BA4;&#x5E03;&#x5C40;
&#x6211;&#x662F;&#x9996;&#x9875;
</pre><p>&#x6B64;&#x65F6; <code>src/pages/about.vue</code></p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- src/pages/about.vue --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>&#x6211;&#x662F;&#x5173;&#x4E8E;&#x9875;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span> 
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x8DEF;&#x7531;&#x5230; <code>/about</code> &#x65F6;&#xFF0C;&#x9875;&#x9762;&#x5C06;&#x6E32;&#x67D3;</p>
<pre data-role="codeBlock" data-info="html" class="language-html">&#x6211;&#x662F;&#x9ED8;&#x8BA4;&#x5E03;&#x5C40;
&#x6211;&#x662F;&#x5173;&#x4E8E;&#x9875;
</pre><br>
<h4 class="mume-header" id="%E9%9D%9E%E9%BB%98%E8%AE%A4%E5%B8%83%E5%B1%80">&#x975E;&#x9ED8;&#x8BA4;&#x5E03;&#x5C40;</h4>

<p>&#x968F;&#x4FBF;&#x521B;&#x5EFA;&#x4E00;&#x4E2A; <code>src/layouts/custom.vue</code></p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- src/layouts/custom.vue --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    &#x6211;&#x662F;&#x975E;&#x9ED8;&#x8BA4;&#x5E03;&#x5C40;custom
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span> <span class="token punctuation">/&gt;</span></span> <span class="token comment">&lt;!-- &#x9875;&#x9762;&#x89C6;&#x56FE;&#x51FA;&#x53E3; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x6B64;&#x65F6; <code>src/pages/index.vue</code> &#x5185;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- src/pages/index.vue --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>&#x6211;&#x662F;&#x9996;&#x9875;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span> 
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- &#x6DFB;&#x52A0;&#x81EA;&#x5B9A;&#x4E49;&#x5757; &#x1F447; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>route</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>yaml<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
meta:
  layout: custom
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>route</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x6B64;&#x65F6;&#x8DEF;&#x7531;&#x5230; <code>/</code>, &#x9875;&#x9762;&#x5C06;&#x6E32;&#x67D3;</p>
<pre data-role="codeBlock" data-info="html" class="language-html">&#x6211;&#x662F;&#x975E;&#x9ED8;&#x8BA4;&#x5E03;&#x5C40;custom
&#x6211;&#x662F;&#x9996;&#x9875;
</pre><p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://github.com/JohnCampionJr/vite-plugin-vue-layouts#overview">vite-plugin-vue-layouts</a></p>
<br>
<h3 class="mume-header" id="5-mock-%E6%94%AF%E6%8C%81httpsgithubcomvbenjsvite-plugin-mock"><a href="https://github.com/vbenjs/vite-plugin-mock">5. Mock &#x652F;&#x6301;</a></h3>

<p>&#x5728;&#x6839;&#x76EE;&#x5F55;&#x4E0B;&#x7684; <code>mock</code> &#x76EE;&#x5F55;&#x4E0B;&#xFF0C;&#x53EF;&#x4EE5;&#x5728;&#x6A21;&#x5757;&#x4E2D;&#x5BFC;&#x51FA;&#x9ED8;&#x8BA4;&#x7684; <code>api</code> &#x8D44;&#x6E90;&#x3002;</p>
<p>&#x4F8B;&#x5982; <code>mock/test.ts</code> &#x5185;&#x5BFC;&#x51FA;</p>
<pre data-role="codeBlock" data-info="ts" class="language-ts"><span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> MockMethod <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;vite-plugin-mock&apos;</span>
<span class="token keyword keyword-export">export</span> <span class="token keyword keyword-default">default</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        url<span class="token operator">:</span> <span class="token string">&apos;/api/get&apos;</span><span class="token punctuation">,</span>
        method<span class="token operator">:</span> <span class="token string">&apos;get&apos;</span><span class="token punctuation">,</span>
        <span class="token function-variable function">response</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword keyword-return">return</span> <span class="token punctuation">{</span>
                code<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
                data<span class="token operator">:</span> <span class="token punctuation">{</span>
                    name<span class="token operator">:</span> <span class="token string">&apos;vben&apos;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">]</span> <span class="token keyword keyword-as">as</span> MockMethod<span class="token punctuation">[</span><span class="token punctuation">]</span>
</pre><p>&#x5728; <code>src</code> &#x4E2D;&#x5C31;&#x53EF;&#x4EE5;&#x8FDB;&#x884C;&#x6A21;&#x62DF;&#x8BF7;&#x6C42;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> useRequest <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">&quot;vue-request&quot;</span>
    <span class="token comment">// &#x8BF7;&#x6C42;&#x63A5;&#x53E3; /api/get</span>
    <span class="token keyword keyword-const">const</span> <span class="token punctuation">{</span> data<span class="token punctuation">,</span> loading<span class="token punctuation">,</span> error <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useRequest</span><span class="token punctuation">(</span><span class="token string">&apos;/api/get&apos;</span><span class="token punctuation">)</span> 
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>data: {{data}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>loading: {{loading}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>error: {{error}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x8FD9;&#x91CC;&#x7528;&#x5230; <a href="https://cn.attojs.org/">vue-request</a> &#x53BB;&#x505A;&#x8BF7;&#x6C42;&#xFF0C;&#x4E0D;&#x8FC7;&#x56E0;&#x4E3A;&#x8BE5; <code>mock</code> &#x62E6;&#x622A;&#x7684;&#x662F;&#x4E00;&#x6574;&#x4E2A;&#x63A5;&#x53E3;&#xFF0C;&#x6240;&#x4EE5;&#x6362;&#x6210; <code>axios</code> &#x7B49;&#x8BF7;&#x6C42;&#x5E93;&#x4E5F;&#x662F;&#x53EF;&#x4EE5;&#x7684;&#x3002;</p>
<p>&#x66F4;&#x591A; <code>mock</code> &#x8BBE;&#x7F6E;&#x53EF;&#x89C1; &#x1F449; <a href="https://github.com/vbenjs/vite-plugin-mock">vite-plugin-mock</a></p>
<br>
<h3 class="mume-header" id="6-api-%E8%87%AA%E5%8A%A8%E5%BC%95%E5%85%A5httpsgithubcomantfuunplugin-auto-import"><a href="https://github.com/antfu/unplugin-auto-import">6. Api &#x81EA;&#x52A8;&#x5F15;&#x5165;</a></h3>

<p>&#x539F;&#x672C; <code>vue</code> &#x7684; <code>api</code> &#x9700;&#x8981;&#x81EA;&#x884C; <code>import</code>&#x3002;</p>
<pre data-role="codeBlock" data-info="ts" class="language-ts"><span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">,</span> computed <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;vue&apos;</span>
<span class="token keyword keyword-const">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
<span class="token keyword keyword-const">const</span> doubled <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
</pre><p>&#x73B0;&#x5728;&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x4F7F;&#x7528;&#x3002;</p>
<pre data-role="codeBlock" data-info="ts" class="language-ts"><span class="token keyword keyword-const">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
<span class="token keyword keyword-const">const</span> doubled <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> count<span class="token punctuation">.</span>value <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
</pre><p>&#x800C;&#x4E14;&#x4E0A;&#x8FB9;&#x7684; <code>api</code> &#x662F;&#x6309;&#x9700;&#x81EA;&#x52A8;&#x5F15;&#x5165;&#x7684;&#x3002;</p>
<p>&#x76EE;&#x524D;&#x6A21;&#x677F;&#x652F;&#x6301;&#x81EA;&#x52A8;&#x5F15;&#x5165; <code>api</code> &#x7684;&#x5E93;&#x5217;&#x8868;&#x5305;&#x62EC;:</p>
<ol>
<li>vue</li>
<li>pinia</li>
<li>vueuse</li>
<li>vue-i18n</li>
<li>vue-router</li>
</ol>
<p>&#x5F53;&#x7136;&#x8FD8;&#x6709;&#x9879;&#x76EE;&#x4E2D;&#x7684;&#x81EA;&#x52A8;&#x5F15;&#x5165;&#xFF0C;&#x53EA;&#x9700;&#x8981;&#x6EE1;&#x8DB3;&#x4EE5;&#x4E0B;&#x89C4;&#x8303;&#x5373;&#x53EF;&#x3002;</p>
<ol>
<li><code>src/composables</code> &#x4E0B;&#x51E1;&#x662F; <code>use</code> &#x5F00;&#x5934;&#x7684;&#x6A21;&#x5757;&#xFF0C;&#x540C;&#x65F6;&#x91CC;&#x8FB9;&#x6709; <code>default</code> &#x5BFC;&#x51FA;&#xFF0C;&#x8BE5;&#x5BFC;&#x51FA;&#x5C31;&#x53EF;&#x4EE5;&#x88AB;&#x6309;&#x9700;&#x81EA;&#x52A8;&#x5F15;&#x5165;&#x3002;</li>
</ol>
<p>&#x4F8B;&#x5982;&#x6709;&#x4E2A; <code>src/composables/foo.ts</code></p>
<pre data-role="codeBlock" data-info="ts" class="language-ts"><span class="token comment">// default &#x5BFC;&#x51FA;</span>
<span class="token keyword keyword-export">export</span> <span class="token keyword keyword-default">default</span> <span class="token number">1000</span>
</pre><p>&#x6B64;&#x65F6;&#x5C31;&#x4E0D;&#x518D;&#x9700;&#x8981; <code>import</code>&#x4E86;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">)</span> <span class="token comment">// &#x8F93;&#x51FA; 1000</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>store.inc()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{store.counter}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><ol start="2">
<li><code>src/stores</code> &#x4E0B;&#x51E1;&#x662F; <code>Store</code> &#x7ED3;&#x5C3E;&#x7684;&#x6A21;&#x5757;&#xFF0C;&#x540C;&#x65F6;&#x91CC;&#x8FB9;&#x6709; <code>default</code> &#x5BFC;&#x51FA;&#xFF0C;&#x8BE5;&#x5BFC;&#x51FA;&#x5C31;&#x53EF;&#x4EE5;&#x6309;&#x9700;&#x81EA;&#x52A8;&#x5F15;&#x5165;&#x3002;</li>
</ol>
<p>&#x4F8B;&#x5982;&#x6709;&#x4E2A; <code>src/stores/counterStore.ts</code></p>
<pre data-role="codeBlock" data-info="ts" class="language-ts"><span class="token comment">// default &#x5BFC;&#x51FA;</span>
<span class="token keyword keyword-export">export</span> <span class="token keyword keyword-default">default</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">&apos;counter&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token function">state</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword keyword-return">return</span> <span class="token punctuation">{</span>
            counter<span class="token operator">:</span> <span class="token number">1</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    actions<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function">inc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>counter<span class="token operator">++</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre><p>&#x6B64;&#x65F6;&#x5C31;&#x4E0D;&#x518D;&#x9700;&#x8981; <code>import</code>&#x4E86;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword keyword-const">const</span> store <span class="token operator">=</span> <span class="token function">counterStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>store.inc()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{store.counter}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://github.com/antfu/unplugin-auto-import">unplugin-auto-import</a> &#x4E0E; <a href="https://github.com/dishait/vite-auto-import-resolvers">vite-auto-import-resolvers</a></p>
<br>
<h3 class="mume-header" id="7-%E7%BB%84%E4%BB%B6%E8%87%AA%E5%8A%A8%E5%BC%95%E5%85%A5httpsgithubcomantfuunplugin-auto-import"><a href="https://github.com/antfu/unplugin-auto-import">7. &#x7EC4;&#x4EF6;&#x81EA;&#x52A8;&#x5F15;&#x5165;</a></h3>

<p>&#x539F;&#x6765;&#x9700;&#x8981; <code>import</code></p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- src/pages/index.vue --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token maybe-class-name">Hello</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">&quot;../components/Hello.vue&quot;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Hello</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x73B0;&#x5728;&#x53EA;&#x8981;&#x5728; <code>src/components</code> &#x4E0B;&#x5B9A;&#x4E49;&#x7684;&#x7EC4;&#x4EF6;&#x90FD;&#x5C06;&#x4F1A;&#x6309;&#x9700;&#x5F15;&#x5165;&#xFF0C;&#x5373; <code>import</code> &#x662F;&#x4E0D;&#x9700;&#x8981;&#x7684;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- src/pages/index.vue --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Hello</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x540C;&#x65F6;&#x6D41;&#x884C;&#x7EC4;&#x4EF6;&#x5E93;&#x81EA;&#x52A8;&#x5F15;&#x5165;&#x4E5F;&#x662F;&#x652F;&#x6301;&#x7684;&#xFF0C;&#x4F8B;&#x5982; <code>Naive ui</code>&#x3002;</p>
<p>&#x53EA;&#x9700;&#x5B89;&#x88C5;&#x4F9D;&#x8D56;&#x3002;</p>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> <span class="token function">add</span> naive-ui

<span class="token comment"># &#x6216;&#x8005; npm i naive-ui</span>
<span class="token comment"># &#x6216;&#x8005; yarn add naive-ui</span>
</pre><p>&#x5373;&#x53EF;&#x5728;&#x6A21;&#x677F;&#x4E2D;&#x4F7F;&#x7528;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- src/pages/index.vue --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>n-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>n-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x76EE;&#x524D;&#x652F;&#x6301;&#x7684;&#x7EC4;&#x4EF6;&#x5E93;&#x6709;:</p>
<ul>
<li><a href="https://www.naiveui.com/zh-CN/os-theme">naive ui</a></li>
<li><a href="https://arco.design/">arco.design</a></li>
<li><a href="https://element-plus.gitee.io/zh-CN/">element-plus</a></li>
<li><a href="https://next.antdv.com/docs/vue/introduce-cn/">ant design of vue</a></li>
<li><a href="https://vueuse.org/guide/components.html">@vueuse/components</a></li>
</ul>
<p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://github.com/antfu/unplugin-vue-components">unplugin-vue-components</a></p>
<br>
<h3 class="mume-header" id="8-%E5%9B%BE%E6%A0%87%E8%87%AA%E5%8A%A8%E5%BC%95%E5%85%A5httpsgithubcomantfuunplugin-auto-import"><a href="https://github.com/antfu/unplugin-auto-import">8. &#x56FE;&#x6807;&#x81EA;&#x52A8;&#x5F15;&#x5165;</a></h3>

<p>&#x53EF;&#x524D;&#x5F80; &#x1F449; <a href="https://icones.netlify.app/">icones</a>&#xFF0C;&#x968F;&#x610F;&#x9009;&#x62E9;&#x70B9;&#x51FB;&#x8FDB;&#x5165;&#x5176;&#x4E2D;&#x4E00;&#x4E2A;&#x56FE;&#x6807;&#x5E93;</p>
<p><img src="public/docs/icons-first-step.png" alt="icons-first-step"></p>
<p>&#x518D;&#x70B9;&#x51FB;&#x9009;&#x62E9;&#x5176;&#x4E2D;&#x4E00;&#x4E2A;&#x559C;&#x6B22;&#x7684;&#x56FE;&#x6807;</p>
<p><img src="public/docs/icons-second-step.png" alt="icons-second-step"></p>
<p>&#x590D;&#x5236;&#x5176;&#x540D;&#x79F0;</p>
<p><img src="public/docs/icons-third-step.png" alt="icons-second-step"></p>
<p>&#x5728;&#x6A21;&#x677F;&#x4E2D;&#x5373;&#x53EF;&#x76F4;&#x63A5;&#x7528;&#x7EC4;&#x4EF6;&#x7684;&#x5F62;&#x5F0F;&#x76F4;&#x63A5;&#x4F7F;&#x7528;&#xFF0C;&#x6CE8;&#x610F;&#x52A0;&#x4E0A;&#x524D;&#x7F00; <code>i-</code>&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token namespace">i-mdi:</span>account-box-multiple</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x4FDD;&#x5B58;&#x540E;&#x7B49;&#x5F85;&#x81EA;&#x52A8;&#x4E0B;&#x8F7D;&#x8BE5;&#x56FE;&#x6807;&#x5E93;&#x540E;&#xFF0C;&#x5C31;&#x53EF;&#x4EE5;&#x5728;&#x9875;&#x9762;&#x4E2D;&#x770B;&#x5230;&#x5BF9;&#x5E94;&#x56FE;&#x6807;&#x3002;</p>
<p>&#x6CE8;&#x610F;&#x81EA;&#x52A8;&#x4E0B;&#x8F7D;&#x56FE;&#x6807;&#x9700;&#x8981; <code>pnpm</code> &#x5305;&#x7BA1;&#x7406;&#x5668;&#x652F;&#x6301;&#xFF0C;&#x5982;&#x679C;&#x4F60;&#x662F;&#x5176;&#x4ED6;&#x5305;&#x7BA1;&#x7406;&#x5668;&#x9700;&#x8981;&#x624B;&#x52A8;&#x5B89;&#x88C5;&#x56FE;&#x6807;&#x96C6; &#x1F447;&#x1F447;&#x1F447;</p>
<p>&#x56FE;&#x6807;&#x96C6;&#x540D;&#x79F0;&#x4E3A; <code>@iconify/</code> &#x52A0; <code>:</code> &#x524D;&#x7F00;&#xFF0C;&#x4F8B;&#x5982;&#x4E0A;&#x8FB9;&#x7684;&#x56FE;&#x6807;&#x662F; <code>mdi:account-box-multiple</code>&#xFF0C;&#x56FE;&#x6807;&#x96C6;&#x540D;&#x79F0;&#x5C31;&#x4E3A; <code>@iconify/mdi</code>&#x3002;</p>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">npm</span> i @iconify/mdi -D

<span class="token comment"># &#x6216;&#x8005; yarn add @iconify/mdi -D</span>
</pre><p>&#x540C;&#x65F6;&#x63A8;&#x8350;&#x4F60;&#x4F7F;&#x7528; <code>vscode</code> &#x63D2;&#x4EF6; <a href="https://marketplace.visualstudio.com/items?itemName=antfu.iconify">Iconify IntelliSense</a>&#x3002;</p>
<p>&#x8BE5;&#x63D2;&#x4EF6;&#x4F1A;&#x5728;&#x6A21;&#x677F;&#x4E2D;&#x663E;&#x793A;&#x56FE;&#x6807;&#x7684;&#x9884;&#x89C8;&#x3002;&#x5C31;&#x50CF;&#x8FD9;&#x6837; &#x1F447;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- &#x6A21;&#x677F;&#x4E2D;&#x4EE3;&#x7801; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token namespace">i-mdi:</span>account-box-multiple</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x5C06;&#x5728; <code>vscode</code> &#x4E2D;&#x5F97;&#x5230;&#x56FE;&#x6807;&#x9884;&#x89C8;</p>
<p><img src="public/docs/icons-preview.png" alt="icons-preview"></p>
<p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://github.com/antfu/unplugin-icons">unplugin-icons</a></p>
<br>
<h3 class="mume-header" id="9-vueuse-%E6%94%AF%E6%8C%81httpsvueuseorg"><a href="https://vueuse.org/">9. VueUse &#x652F;&#x6301;</a></h3>

<p><code>VueUse</code> &#x662F;&#x4E00;&#x4E2A;&#x8D85;&#x7EA7;&#x5F3A;&#x7684; <code>hooks</code> &#x5E93;&#xFF0C;&#x4F8B;&#x5982;&#x4F60;&#x8981;&#x83B7;&#x53D6;&#x9F20;&#x6807;&#x4F4D;&#x7F6E;&#xFF0C;&#x53EA;&#x9700;&#x8981;&#x8FD9;&#x6837; &#x1F447;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token comment">// useMouse &#x88AB;&#x81EA;&#x52A8;&#x6309;&#x9700;&#x5F15;&#x5165;&#x4E86;&#xFF0C;&#x4E0D;&#x9700;&#x8981;import</span>
    <span class="token keyword keyword-const">const</span> <span class="token punctuation">{</span> x<span class="token punctuation">,</span> y <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useMouse</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>x&#x5750;&#x6807; {{x}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>y&#x5750;&#x6807; {{y}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://vueuse.org/">VueUse</a></p>
<br>
<h3 class="mume-header" id="10-typescript-%E7%9A%84httpswwwtslangcn"><a href="https://www.tslang.cn/">10. TypeScript &#x7684;</a></h3>

<p>&#x4E0D;&#x9700;&#x8981;&#x91CD;&#x65B0;&#x914D;&#x7F6E;&#xFF0C;&#x76F4;&#x63A5;&#x7528; <code>ts</code> &#x4E66;&#x5199;&#x5C31;&#x884C;&#x4E86;&#x3002;</p>
<br>
<h3 class="mume-header" id="11-windi-css-%E7%9A%84httpscnwindicssorg"><a href="https://cn.windicss.org/">11. Windi CSS &#x7684;</a></h3>

<p><code>Windi CSS</code> &#x662F;&#x4E00;&#x4E2A;&#x5F00;&#x53D1;&#x4E2D;&#x901F;&#x5EA6;&#x66F4;&#x5FEB;&#x7684; <code>&#x539F;&#x5B50;css</code> &#x5E93;&#x3002;</p>
<p>&#x76F4;&#x63A5;&#x5728;&#x6A21;&#x677F;&#x4E2D;&#x7528;&#x5C31;&#x884C;&#x4E86;&#xFF0C;&#x4E0D;&#x9700;&#x8981;&#x914D;&#x7F6E;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bg-red-500 text-white<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        &#x6211;&#x662F;&#x7EA2;&#x8272;&#x80CC;&#x666F;&#x7684;&#x767D;&#x8272;&#x6587;&#x672C;
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x4E0A;&#x8FF0;&#x6A21;&#x677F;&#x5C06;&#x6E32;&#x67D3;&#x7EA2;&#x8272;&#x80CC;&#x666F;&#x767D;&#x8272;&#x7684;&#x5B57;&#x3002;</p>
<p>&#x540C;&#x65F6;&#x652F;&#x6301; <a href="https://cn.windicss.org/features/attributify.html#attributify-mode">&#x5C5E;&#x6027;&#x5316;&#x6A21;&#x5F0F;</a>&#xFF0C;&#x5373;&#x53EF;&#x4EE5;&#x7528;&#x7B80;&#x5199;&#x3002;&#x8BE5;&#x529F;&#x80FD;&#x9ED8;&#x8BA4;&#x5173;&#x95ED;&#xFF0C;&#x53EF;&#x5728; <code>windi.config.ts</code> &#x4E2D; &#x8BBE;&#x7F6E; <code>attributify</code> &#x4E3A; <code>true</code> &#x5F00;&#x542F;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>white<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bg</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>red-500<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        &#x6211;&#x662F;&#x7EA2;&#x8272;&#x80CC;&#x666F;&#x7684;&#x767D;&#x8272;&#x6587;&#x672C;
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x8FD9;&#x5728;&#x8C03;&#x6574;&#x8FB9;&#x8DDD;&#x5C3A;&#x5BF8;&#x4EE5;&#x53CA;&#x7B49;&#x65B9;&#x9762;&#x53EF;&#x4EE5;&#x51CF;&#x5C11;&#x4EE3;&#x7801;&#x91CF;&#x3002;</p>
<p>&#x540C;&#x65F6;&#x9884;&#x8BBE; <a href="https://cn.windicss.org/plugins/official/typography.html">&#x6392;&#x7248;</a> &#x63D2;&#x4EF6;&#xFF0C;&#x89E3;&#x51B3;&#x7B80;&#x5355;&#x7684;&#x5E03;&#x5C40;&#x56F0;&#x96BE;&#x95EE;&#x9898;&#x3002;</p>
<p>&#x5F53;&#x7136;&#x4E5F;&#x652F;&#x6301; <a href="https://cn.windicss.org/features/analyzer.html">&#x53EF;&#x89C6;&#x5316;&#x5206;&#x6790;&#x5668;</a> &#x751F;&#x6210; <code>&#x539F;&#x5B50;css</code> &#x62A5;&#x544A;.</p>
<p>&#x5728;&#x7EC8;&#x7AEF;&#x4E2D;&#x8F93;&#x5165;&#x547D;&#x4EE4;&#xFF0C;&#x5373;&#x53EF;&#x770B;&#x5230;&#x62A5;&#x544A;</p>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> analysis

<span class="token comment"># &#x6216;&#x8005; npm run analysis</span>
<span class="token comment"># &#x6216;&#x8005; yarn analysis</span>
</pre><p>&#x6216;&#x8005;&#x6253;&#x5305;&#x8F93;&#x51FA;&#x8BE5;&#x62A5;&#x544A;</p>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> analysis:build

<span class="token comment"># &#x6216;&#x8005; npm run analysis:build</span>
<span class="token comment"># &#x6216;&#x8005; yarn analysis:build</span>
</pre><p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://cn.windicss.org/">Windi CSS</a></p>
<br>
<h3 class="mume-header" id="12-%E6%9A%97%E9%BB%91%E6%A8%A1%E5%BC%8F%E6%94%AF%E6%8C%81httpscnwindicssorgfeaturesdark-modehtmldark-mode"><a href="https://cn.windicss.org/features/dark-mode.html#dark-mode">12. &#x6697;&#x9ED1;&#x6A21;&#x5F0F;&#x652F;&#x6301;</a></h3>

<p>&#x6697;&#x9ED1;&#x6A21;&#x5F0F;&#x7531; <code>Windi CSS</code> &#x7684; <code>&#x6697;&#x9ED1;&#x6A21;&#x5F0F;</code> &#x548C; <code>VueUse</code> &#x5B9E;&#x73B0;&#x3002;</p>
<p><code>src/composables</code> &#x76EE;&#x5F55;&#x7528;&#x6765;&#x5B58;&#x50A8; <code>composition-api</code> &#x6A21;&#x5757;&#x3002;</p>
<p>&#x8BE5;&#x76EE;&#x5F55;&#x4E0B;&#x9884;&#x8BBE;&#x4E86;<code>useDarks</code> &#x6A21;&#x5757;&#xFF0C;&#x8BE5;&#x6A21;&#x5757;&#x5BFC;&#x51FA; <code>isDark</code> &#x548C; <code>toggleDark</code> &#x7528;&#x6765;&#x663E;&#x793A;&#x548C;&#x5207;&#x6362;&#x6697;&#x9ED1;&#x6A21;&#x5F0F;&#x3002;</p>
<pre data-role="codeBlock" data-info="ts" class="language-ts"><span class="token comment">// src/composables/useDarks.ts</span>

<span class="token comment">// vueuse&#x7684; api &#x4F1A;&#x81EA;&#x52A8;&#x6309;&#x9700;&#x5F15;&#x5165;&#xFF0C;&#x65E0;&#x9700;import</span>
<span class="token keyword keyword-export">export</span> <span class="token keyword keyword-const">const</span> isDark <span class="token operator">=</span> <span class="token function">useDark</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword keyword-export">export</span> <span class="token keyword keyword-const">const</span> toggleDark <span class="token operator">=</span> <span class="token function">useToggle</span><span class="token punctuation">(</span>isDark<span class="token punctuation">)</span>

<span class="token keyword keyword-export">export</span> <span class="token keyword keyword-const">const</span> <span class="token function-variable function">useDarks</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> isDark<span class="token punctuation">,</span> toggleDark <span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre><p>&#x6A21;&#x677F;&#x4E2D;&#x5373;&#x53EF;&#x76F4;&#x63A5;&#x7528;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> useDarks <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">&quot;../composables/useDarks&quot;</span><span class="token punctuation">;</span>

<span class="token keyword keyword-const">const</span> <span class="token punctuation">{</span> isDark<span class="token punctuation">,</span> toggleDark <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useDarks</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">m</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        Hello&#xFF0C;This is the tov template&#xFF01;&#xFF01;
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">m</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">cursor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pointer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toggleDark()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        light: {{ isDark }} click me!!
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://cn.windicss.org/features/dark-mode.html#dark-mode">&#x6697;&#x9ED1;&#x6A21;&#x5F0F;</a></p>
<br>
<h3 class="mume-header" id="13-swr-%E8%AF%B7%E6%B1%82%E6%94%AF%E6%8C%81httpscnattojsorg"><a href="https://cn.attojs.org/">13. SWR &#x8BF7;&#x6C42;&#x652F;&#x6301;</a></h3>

<p>SWR &#x662F;&#x66F4;&#x73B0;&#x4EE3;&#x7684;&#x8BF7;&#x6C42;&#x65B9;&#x5F0F;&#xFF0C;&#x5177;&#x4F53;&#x53EF;&#x89C1;&#x6587;&#x7AE0; &#x1F449; <a href="https://zhuanlan.zhihu.com/p/89570321">SWR</a>&#x3002;</p>
<p>&#x800C; <a href="https://cn.attojs.org/">vue-request</a> &#x662F;&#x4E00;&#x4E2A; <code>SWR</code> &#x7684; <code>Vue</code> &#x7248;&#x672C;&#x8BF7;&#x6C42;&#x5E93;&#x3002;</p>
<p>&#x4F60;&#x53EF;&#x4EE5;&#x8FD9;&#x6837;&#x7528;&#xFF0C;&#x4F8B;&#x5982;&#x8BF7;&#x6C42; <code>/api/test</code></p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> useRequest <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">&quot;vue-request&quot;</span>
    <span class="token keyword keyword-const">const</span> <span class="token punctuation">{</span> data<span class="token punctuation">,</span> loading<span class="token punctuation">,</span> error <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useRequest</span><span class="token punctuation">(</span><span class="token string">&apos;/api/test&apos;</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>data: {{data}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>error: {{error}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>loading: {{loading}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x6240;&#x6709;&#x57FA;&#x672C;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x72B6;&#x6001;&#x548C;&#x7F13;&#x5B58;&#x90FD;&#x5E2E;&#x4F60;&#x641E;&#x5B9A;&#x4E86;&#xFF0C;&#x4E0D;&#x9700;&#x8981;&#x91CD;&#x65B0;&#x5C01;&#x88C5;&#x3002;</p>
<p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://cn.attojs.org/">vue-request</a></p>
<br>
<h3 class="mume-header" id="14-pinia-%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86httpspiniavuejsorg"><a href="https://pinia.vuejs.org/">14. pinia &#x72B6;&#x6001;&#x7BA1;&#x7406;</a></h3>

<p><code>pinia</code> &#x662F;&#x4E0B;&#x4E00;&#x4EE3;&#x7684;&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x5E93;&#xFF0C;&#x6BD4; <code>vuex</code> &#x66F4;&#x7B80;&#x5355;&#xFF0C;<code>ts</code> &#x652F;&#x6301;&#x66F4;&#x597D;&#x3002;</p>
<p>&#x4F60;&#x53EF;&#x4EE5;&#x5728; <code>src/stores</code> &#x4E2D;&#x8FDB;&#x884C;&#x72B6;&#x6001;&#x7684;&#x5B9A;&#x4E49;&#x3002;</p>
<p>&#x4F8B;&#x5982;&#x521B;&#x5EFA; <code>src/stores/counter.ts</code> &#x1F447;</p>
<pre data-role="codeBlock" data-info="ts" class="language-ts"><span class="token comment">// src/stores/counter.ts</span>
<span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> defineStore <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;pinia&apos;</span>

<span class="token keyword keyword-export">export</span> <span class="token keyword keyword-const">const</span> useCounterStore <span class="token operator">=</span> <span class="token function">defineStore</span><span class="token punctuation">(</span><span class="token string">&apos;counter&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">state</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-return">return</span> <span class="token punctuation">{</span> count<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  actions<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">inc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>count<span class="token operator">++</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre><p>&#x5B9A;&#x4E49;&#x5B8C;&#x540E;&#x5728; <code>setup</code> &#x4E2D;&#x76F4;&#x63A5;&#x4F7F;&#x7528;&#x5373;&#x53EF;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- src/pages/index.vue --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    import { useCounterStore } from &quot;../stores/counter&quot;
    const Counter = useCounterStore()
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Counter.inc<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{Counter.count}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x66F4;&#x591A;&#x5177;&#x4F53;&#x4F7F;&#x7528;&#x53EF;&#x89C1; &#x1F449; <a href="https://pinia.vuejs.org/">pinia</a></p>
<br>
<h3 class="mume-header" id="15-pnpm-%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8httpspnpmiozh"><a href="https://pnpm.io/zh/">15. pnpm &#x5305;&#x7BA1;&#x7406;&#x5668;</a></h3>

<p><code>pnpm</code> &#x662F;&#x975E;&#x5E38;&#x4F18;&#x79C0;&#x7684;&#x5305;&#x7BA1;&#x7406;&#x5668;&#xFF0C;&#x66F4;&#x5FEB;&#x3001;&#x66F4;&#x8282;&#x7701;&#x7A7A;&#x95F4;&#x3001;&#x66F4;&#x5408;&#x7406;&#x3002;</p>
<p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://pnpm.io/zh/">pnpm</a></p>
<br>
<h3 class="mume-header" id="16-%E8%B7%B3%E8%BD%AC%E8%BF%9B%E5%BA%A6%E6%9D%A1%E6%94%AF%E6%8C%81httpsgithubcomrstacruznprogress"><a href="https://github.com/rstacruz/nprogress">16. &#x8DF3;&#x8F6C;&#x8FDB;&#x5EA6;&#x6761;&#x652F;&#x6301;</a></h3>

<p>&#x8DF3;&#x8F6C;&#x8FDB;&#x5EA6;&#x6761;&#x7531; <code>nprogress</code> &#x5B9E;&#x73B0;&#xFF0C;&#x53EF;&#x5728;<code>src/styles/main.css</code> &#x4E2D;&#x8C03;&#x6574;&#x914D;&#x8272;&#x3002;</p>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token comment">/** src/styles/main.css **/</span>

<span class="token comment">/** &#x7701;&#x7565;&#x5176;&#x4ED6;&#x6837;&#x5F0F; **/</span>
<span class="token selector"><span class="token id">#nprogress</span> <span class="token class">.bar</span></span> <span class="token punctuation">{</span>
    <span class="token atrule"><span class="token rule">@apply</span> bg-purple-700 bg-opacity-75<span class="token punctuation">;</span></span> <span class="token comment">/** &#x914D;&#x8272; **/</span>

    <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
    <span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">1031</span><span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>

    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><p>&#x5173;&#x4E8E; <code>@apply</code> &#x7531; <a href="https://cn.windicss.org/features/directives.html#apply">Windi Css apply &#x6307;&#x4EE4;</a> &#x5B9E;&#x73B0;&#x3002;</p>
<p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://github.com/rstacruz/nprogress">nprogress</a></p>
<br>
<h3 class="mume-header" id="17-inspect-%E8%B0%83%E8%AF%95%E6%94%AF%E6%8C%81httpsgithubcomantfuvite-plugin-inspect"><a href="https://github.com/antfu/vite-plugin-inspect">17. Inspect &#x8C03;&#x8BD5;&#x652F;&#x6301;</a></h3>

<p>&#x542F;&#x52A8;&#x9879;&#x76EE;</p>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> dev

<span class="token comment"># &#x6216;&#x8005; npm run dev</span>
<span class="token comment"># &#x6216;&#x8005; yarn dev</span>
</pre><p>&#x53EF;&#x4EE5;&#x770B;&#x5230;&#x4E00;&#x4E2A; <code>url</code></p>
<p><img src="public/docs/inspect.png" alt="inspect"></p>
<p>&#x5148;&#x8FDB;&#x5165; <code>http://localhost:3000</code>&#xFF0C;&#x518D;&#x8FDB;&#x5165; <code>http://localhost:3000/__inspect/</code> &#x5373;&#x53EF;&#x83B7;&#x5F97;&#x4F9D;&#x8D56;&#x56FE;&#x8C31;&#x3002;</p>
<p><img src="public/docs/inspect-atlas.png" alt="inspect-atlas"></p>
<p>&#x901A;&#x8FC7;&#x9876;&#x90E8;&#x7684;&#x4E00;&#x4E9B;&#x6309;&#x94AE;&#x8FD8;&#x53EF;&#x4EE5;&#x8C03;&#x6574;&#x4F9D;&#x8D56;&#x5448;&#x73B0;&#x3002;</p>
<p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://github.com/antfu/vite-plugin-inspect">vite-plugin-inspect</a></p>
<br>
<h3 class="mume-header" id="18-%E6%8F%92%E4%BB%B6%E8%87%AA%E5%8A%A8%E5%8A%A0%E8%BD%BD%E6%94%AF%E6%8C%81">18. &#x63D2;&#x4EF6;&#x81EA;&#x52A8;&#x52A0;&#x8F7D;&#x652F;&#x6301;</h3>

<p>&#x8BE5;&#x529F;&#x80FD;&#x7531; <code>vite</code> &#x7684; <a href="https://cn.vitejs.dev/guide/features.html#glob-import">Global &#x5BFC;&#x5165;</a> &#x5B9E;&#x73B0;&#x3002;</p>
<p>&#x53EA;&#x9700;&#x8981;&#x5728; <code>src/modules</code> &#x4E2D;&#x7684;&#x6A21;&#x5757;&#x91CC;&#x5BFC;&#x51FA;&#x9ED8;&#x8BA4;&#x51FD;&#x6570;&#x5373;&#x53EF;&#x3002;</p>
<p>&#x4F8B;&#x5982; <code>pinia</code>&#xFF0C;&#x53EA;&#x9700;&#x8981;&#x8FD9;&#x6837;&#x505A;&#x3002;</p>
<pre data-role="codeBlock" data-info="ts" class="language-ts"><span class="token comment">// src/modules/pinia.ts</span>

<span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> App <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;vue&apos;</span>

<span class="token comment">// &#x5BFC;&#x51FA; default &#x63A5;&#x53E3;</span>
<span class="token keyword keyword-export">export</span> <span class="token keyword keyword-default">default</span> <span class="token punctuation">(</span>app<span class="token operator">:</span> App<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token function">createPinia</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</pre><p>&#x6216;&#x8005; <code>vue-router</code></p>
<pre data-role="codeBlock" data-info="ts" class="language-ts"><span class="token comment">// src/modules/router.ts</span>

<span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> App <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;vue&apos;</span>

<span class="token comment">// &#x7701;&#x7565;&#x5404;&#x79CD;&#x914D;&#x7F6E;</span>

<span class="token comment">// &#x5BFC;&#x51FA; default &#x63A5;&#x53E3;</span>
<span class="token keyword keyword-export">export</span> <span class="token keyword keyword-default">default</span> <span class="token punctuation">(</span>app<span class="token operator">:</span> App<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>router<span class="token punctuation">)</span>
</pre><p>&#x5F53;&#x7136; <code>pinia</code> &#x548C; <code>vue-router</code> &#x5DF2;&#x7ECF;&#x9884;&#x8BBE;&#x597D;&#x4E86;&#xFF0C;&#x4F60;&#x4E0D;&#x9700;&#x8981;&#x91CD;&#x65B0;&#x5173;&#x6CE8;&#x4ED6;&#x4EEC;&#x3002;</p>
<p>&#x5177;&#x4F53;&#x53EF;&#x89C1;&#x5B9E;&#x73B0; &#x1F449; <a href="..\src\main.ts">&#x63D2;&#x4EF6;&#x81EA;&#x52A8;&#x52A0;&#x8F7D;&#x5B9E;&#x73B0;</a></p>
<br>
<h3 class="mume-header" id="19-vitest-%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95%E6%94%AF%E6%8C%81httpsvitestdevguideconfiguring-vitest"><a href="https://vitest.dev/guide/#configuring-vitest">19. Vitest &#x5355;&#x5143;&#x6D4B;&#x8BD5;&#x652F;&#x6301;</a></h3>

<p>&#x5728; <code>src/test</code> &#x76EE;&#x5F55;&#x4E2D;&#x53EF;&#x4EE5;&#x4E66;&#x5199;&#x5355;&#x5143;&#x6D4B;&#x8BD5;&#x3002;</p>
<pre data-role="codeBlock" data-info="ts" class="language-ts"><span class="token keyword keyword-import">import</span> <span class="token punctuation">{</span> it<span class="token punctuation">,</span> describe<span class="token punctuation">,</span> expect<span class="token punctuation">,</span> assert <span class="token punctuation">}</span> <span class="token keyword keyword-from">from</span> <span class="token string">&apos;vitest&apos;</span>

<span class="token function">describe</span><span class="token punctuation">(</span><span class="token string">&apos;suite name&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&apos;foo&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token function">expect</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toEqual</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
        <span class="token function">expect</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">.</span>to<span class="token punctuation">.</span>be<span class="token punctuation">.</span><span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

    <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&apos;bar&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        assert<span class="token punctuation">.</span><span class="token function">equal</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

    <span class="token function">it</span><span class="token punctuation">(</span><span class="token string">&apos;snapshot&apos;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token function">expect</span><span class="token punctuation">(</span><span class="token punctuation">{</span> foo<span class="token operator">:</span> <span class="token string">&apos;bar&apos;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toMatchSnapshot</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre><p>&#x7136;&#x540E;&#x5728;&#x7EC8;&#x7AEF;&#x4E2D;&#x8F93;&#x5165;&#x547D;&#x4EE4;&#x5373;&#x53EF;&#x6D4B;&#x8BD5;</p>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> <span class="token builtin class-name">test</span>

<span class="token comment"># &#x6216;&#x8005; npm run test</span>
<span class="token comment"># &#x6216;&#x8005; yarn test</span>
</pre><p>&#x6216;&#x8005;&#x751F;&#x6210;&#x62A5;&#x544A;</p>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> coverage

<span class="token comment"># &#x6216;&#x8005; npm run coverage</span>
<span class="token comment"># &#x6216;&#x8005; yarn coverage</span>
</pre><p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://vitest.dev/guide/#configuring-vitest">Vitest</a></p>
<br>
<h3 class="mume-header" id="20-%E6%94%AF%E6%8C%81-markdown-%E6%B8%B2%E6%9F%93httpsgithubcomantfuvite-plugin-md"><a href="https://github.com/antfu/vite-plugin-md">20. &#x652F;&#x6301; Markdown &#x6E32;&#x67D3;</a></h3>

<p><code>markdown</code> &#x6E32;&#x67D3;&#x53EF;&#x4EE5;&#x7528;&#x6765;&#x4E66;&#x5199;&#x4E00;&#x4E9B;&#x7B80;&#x5355;&#x7684;&#x8BF4;&#x660E;&#x3002;</p>
<p>&#x53EA;&#x9700;&#x8981;&#x628A; <code>src/pages</code> &#x76EE;&#x5F55;&#x4E0B;&#x7684;&#x9875;&#x9762;&#x540E;&#x7F00;&#x7531; <code>.vue</code> &#x6539;&#x4E3A; <code>.md</code>&#xFF0C;&#x7136;&#x540E;&#x518D;&#x6539;&#x4E3A; <code>markdown</code> &#x8BED;&#x6CD5;&#x5373;&#x53EF;&#x3002;</p>
<p>&#x4F8B;&#x5982; <code>src/pages/about.md</code></p>
<pre data-role="codeBlock" data-info="md" class="language-gfm"><code>## About Page

&gt; The page is markdown file
</code></pre><p>&#x5F53;&#x4F60;&#x8DEF;&#x7531;&#x5230; <code>/about</code> &#x540E;&#x5373;&#x53EF;&#x770B;&#x5230;&#x5BF9;&#x5E94;&#x7684; <code>markdown</code> &#x6E32;&#x67D3;&#x3002;</p>
<p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://github.com/antfu/vite-plugin-md">vite-plugin-md</a></p>
<br>
<br>
<h3 class="mume-header" id="21-%E8%B7%AF%E5%BE%84%E5%88%AB%E5%90%8D-~-%E6%94%AF%E6%8C%81">21. &#x8DEF;&#x5F84;&#x522B;&#x540D; <code>~</code> &#x652F;&#x6301;</h3>

<p><code>~</code> &#x8DEF;&#x5F84;&#x5C06;&#x88AB;&#x5BFC;&#x5411;&#x9879;&#x76EE;&#x7684; <code>src</code> &#x76EE;&#x5F55;&#x3002;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- src/pages/index.vue --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> useDarks <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">&quot;~/composables/dark&quot;</span>

<span class="token comment">// &#x7B49;&#x4EF7;&#x4E8E;</span>
<span class="token comment">// import { useDarks } from &quot;../composables/dark&quot;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</pre><br>
<br>
<h3 class="mume-header" id="22-%E5%91%BD%E4%BB%A4%E8%A1%8C%E8%87%AA%E5%8A%A8%E5%88%9B%E5%BB%BA%E4%B8%8E%E5%88%A0%E9%99%A4">22. &#x547D;&#x4EE4;&#x884C;&#x81EA;&#x52A8;&#x521B;&#x5EFA;&#x4E0E;&#x5220;&#x9664;</h3>

<p>&#x53EA;&#x8981;&#x8F93;&#x5165; &#x1F447;&#xFF0C;&#x5373;&#x53EF;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x6807;&#x51C6;&#x7684;&#x9875;&#x9762;&#x6216;&#x7EC4;&#x4EF6;</p>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> auto:create

<span class="token comment"># &#x6216;&#x8005; npm run auto:create</span>
<span class="token comment"># &#x6216;&#x8005; yarn auto:create</span>
</pre><p>&#x5F53;&#x7136;&#x4E5F;&#x53EF;&#x4EE5;&#x8FDB;&#x884C;&#x5220;&#x9664; &#x1F447;</p>
<pre data-role="codeBlock" data-info="shell" class="language-shell"><span class="token function">pnpm</span> auto:remove

<span class="token comment"># &#x6216;&#x8005; npm run auto:remove</span>
<span class="token comment"># &#x6216;&#x8005; yarn auto:remove</span>
</pre><br>
<br>
<h3 class="mume-header" id="23-i18n-%E5%9B%BD%E9%99%85%E5%8C%96%E6%94%AF%E6%8C%81httpsgithubcomintlifybundle-toolstreemainpackagesvite-plugin-vue-i18n"><a href="https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n">23. i18n &#x56FD;&#x9645;&#x5316;&#x652F;&#x6301;</a></h3>

<p>&#x5728;&#x65E5;&#x5E38;&#x7684;&#x4E1A;&#x52A1;&#x5F53;&#x4E2D;&#xFF0C;&#x53EF;&#x80FD;&#x4F1A;&#x5B58;&#x5728;&#x4E00;&#x4E9B;&#x9700;&#x8981;&#x56FD;&#x9645;&#x5316;&#x7684;&#x573A;&#x666F;&#x3002;&#x90A3;&#x4E48;&#x53EA;&#x9700;&#x8981;&#x5728;&#x6839;&#x76EE;&#x5F55;&#x4E0B;&#x7684; <code>locales</code> &#x4E2D;&#x5B9A;&#x4E49;&#x4E0D;&#x540C;&#x8BED;&#x8A00;&#x7684; <code>yml</code> &#x5373;&#x53EF;&#x5728;&#x9879;&#x76EE;&#x4E2D;&#x505A;&#x5230;&#x5F00;&#x7BB1;&#x5373;&#x7528;&#x7684;&#x56FD;&#x9645;&#x5316;&#x652F;&#x6301;&#x3002;</p>
<p>&#x6BD4;&#x5982; <code>locales/en.yml</code> &#x4E2D;&#x7528;&#x6765;&#x5B9A;&#x4E49;&#x9700;&#x8981;&#x56FD;&#x9645;&#x5316;&#x652F;&#x6301;&#x7684;&#x82F1;&#x6587;&#x5185;&#x5BB9;&#x3002;</p>
<pre data-role="codeBlock" data-info="yml" class="language-yaml"><span class="token comment"># locales/en.yml</span>
<span class="token comment"># English</span>

<span class="token key atrule">index</span><span class="token punctuation">:</span> index
<span class="token key atrule">about</span><span class="token punctuation">:</span> about
<span class="token key atrule">not-found</span><span class="token punctuation">:</span> Notfound
</pre><p>&#x53C8;&#x5982; <code>locales/zh-CN.yml</code> &#x4E2D;&#x7528;&#x6765;&#x5B9A;&#x4E49;&#x9700;&#x8981;&#x56FD;&#x9645;&#x5316;&#x652F;&#x6301;&#x7684;&#x4E2D;&#x6587;&#x5185;&#x5BB9;&#x3002;</p>
<pre data-role="codeBlock" data-info="yml" class="language-yaml"><span class="token comment"># locales/zh-CN.yml</span>
<span class="token comment"># &#x4E2D;&#x6587;</span>

<span class="token key atrule">index</span><span class="token punctuation">:</span> &#x4E3B;&#x9875;
<span class="token key atrule">about</span><span class="token punctuation">:</span> &#x5173;&#x4E8E;
<span class="token key atrule">not-found</span><span class="token punctuation">:</span> &#x672A;&#x627E;&#x5230;&#x9875;&#x9762;
</pre><p>&#x6B64;&#x65F6;&#x5728;&#x7EC4;&#x4EF6;&#x4E2D;&#x5373;&#x53EF;&#x8FD9;&#x6837;&#x7528; &#x1F447;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">// &#x8BE5;api&#x662F;&#x5168;&#x5C40;&#x6309;&#x9700;&#x5F15;&#x5165;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x7528;</span>
<span class="token comment">// t &#x7528;&#x6765;&#x7ED1;&#x5B9A;&#x7279;&#x5B9A;&#x7684;&#x8BED;&#x5757;</span>
<span class="token keyword keyword-const">const</span> <span class="token punctuation">{</span> t<span class="token punctuation">,</span> locale <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token keyword keyword-const">const</span> <span class="token function-variable function">toggleLocale</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
     <span class="token comment">// locale.value &#x7528;&#x6765;&#x8868;&#x793A;&#x5F53;&#x524D;&#x6240;&#x5C5E;&#x8BED;&#x8A00;&#xFF0C;&#x53EF;&#x4FEE;&#x6539;&#x8FDB;&#x884C;&#x8BED;&#x8A00;&#x5207;&#x6362;</span>
     locale<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">=</span> locale<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">===</span> <span class="token string">&apos;zh-CN&apos;</span> <span class="token operator">?</span> <span class="token string">&apos;en&apos;</span> <span class="token operator">:</span> <span class="token string">&apos;zh-CN&apos;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">m</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>6<span class="token punctuation">&quot;</span></span> <span class="token attr-name">cursor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pointer<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toggleLocale()<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>language: {{ t(&apos;index&apos;) }} click me!!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x66F4;&#x8BE6;&#x7EC6;&#x7684;&#x8BF4;&#x660E;&#x53EF;&#x89C1;&#x7528;&#x5230;&#x7684; <code>vite &#x63D2;&#x4EF6;</code> &#x1F449; <a href="https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n">@intlify/vite-plugin-vue-i18n</a> &#x4E0E; <code>vue&#x63D2;&#x4EF6;</code> <a href="https://github.com/intlify/vue-i18n-next">vue-i18n</a>&#x3002;</p>
<p>&#x53E6;&#x5916; <code>yml</code> &#x662F;&#x76EE;&#x524D;&#x524D;&#x7AEF;&#x4E2D;&#x6D41;&#x884C;&#x7684;&#x914D;&#x7F6E;&#x6587;&#x4EF6;&#x683C;&#x5F0F;&#xFF0C;&#x8BED;&#x6CD5;&#x53EF;&#x89C1;&#x962E;&#x4E00;&#x5CF0;&#x5148;&#x751F;&#x7684; &#x1F449; <a href="http://www.ruanyifeng.com/blog/2016/07/yaml.html">YAML &#x8BED;&#x8A00;&#x6559;&#x7A0B;</a>&#x3002;</p>
<p><code>vscode</code> &#x63D2;&#x4EF6;&#x63A8;&#x8350;:</p>
<ul>
<li>&#x591A;&#x5408;&#x4E00;&#x7684; <code>i18n</code> &#x652F;&#x6301; <a href="https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally">i18n Ally</a></li>
</ul>
<br>
<br>
<h3 class="mume-header" id="24-%E6%BC%82%E4%BA%AE%E7%9A%84-404-%E9%A1%B5%E6%94%AF%E6%8C%81">24. &#x6F02;&#x4EAE;&#x7684; <code>404</code> &#x9875;&#x652F;&#x6301;</h3>

<p>&#x5728;&#x65E5;&#x5E38;&#x4E1A;&#x52A1;&#x4E2D;&#xFF0C;&#x5F53;&#x7528;&#x6237;&#x8BBF;&#x95EE;&#x4E0D;&#x5B58;&#x5728;&#x7684;&#x9875;&#x9762;&#x65F6;&#xFF0C;&#x5E94;&#x8BE5;&#x7ED9;&#x5230;&#x6211;&#x4EEC;&#x7684;&#x7528;&#x6237;&#x4E00;&#x4E2A;&#x4E0D;&#x5B58;&#x5728;&#x7684;&#x4FE1;&#x606F;&#x63D0;&#x793A;&#xFF0C;&#x800C;&#x8FD9;&#x4E2A;&#x63D0;&#x793A;&#x7684;&#x9875;&#x9762;&#x5C31;&#x662F; <code>404</code> &#x9875;&#x3002;</p>
<p>&#x4F60;&#x53EF;&#x4EE5;&#x968F;&#x4FBF;&#x8BBF;&#x95EE;&#x4E00;&#x4E2A;&#x4E0D;&#x5B58;&#x5728;&#x7684;&#x9875;&#x9762;&#xFF0C;&#x4F8B;&#x5982; <code>/bucunzai</code></p>
<p><img src="public/docs/notFound.png" alt="notFound"></p>
<p>&#x5F53;&#x7136;&#x8FD8;&#x6709;&#x6697;&#x9ED1;&#x6A21;&#x5F0F;&#x9002;&#x5E94;&#x3002;</p>
<p><img src="public/docs/notFound-dark.png" alt="notFound-dark"></p>
<p>&#x4E5F;&#x652F;&#x6301;&#x7B80;&#x5355;&#x7684;&#x54CD;&#x5E94;&#x5F0F;&#x9002;&#x5E94;&#x3002;&#x4F8B;&#x5982;&#x79FB;&#x52A8;&#x7AEF;&#x6D4F;&#x89C8;&#x5668;&#x4E0A;&#x4F1A;&#x6709;&#x6B63;&#x786E;&#x7684;&#x663E;&#x793A;&#x3002;</p>
<p>&#x5F53;&#x7136;&#x5982;&#x679C;&#x8FD9;&#x4E2A; <code>404</code> &#x7684;&#x5C01;&#x9762;&#x4E0D;&#x7B26;&#x5408;&#x4F60;&#x7684;&#x53E3;&#x5473;&#xFF0C;&#x90A3;&#x4E48;&#x53EF;&#x4EE5;&#x5728; <code>pages/[...notFound].vue</code> &#x4E2D;&#x4FEE;&#x6539; <code>img</code> &#x6807;&#x7B7E;&#x7684; <code>src</code>&#x3002;&#x9ED8;&#x8BA4;&#x662F; <code>32.svg</code>&#xFF0C;&#x652F;&#x6301; <code>1 ~ 33</code> &#x7684; <code>svg</code>&#x3002;</p>
<p>&#x4F8B;&#x5982;&#xFF0C;&#x9ED8;&#x8BA4; &#x1F447;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- &#x7701;&#x7565;&#x5404;&#x79CD;&#x4EE3;&#x7801; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/notFound/32.svg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>page not found<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x4FEE;&#x6539; <code>/notFound/32.svg</code> &#x4E3A; <code>/notFound/33.svg</code></p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token comment">&lt;!-- &#x7701;&#x7565;&#x5404;&#x79CD;&#x4EE3;&#x7801; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/notFound/33.svg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>cover<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>page not found<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x5373;&#x53EF;&#x5207;&#x6362;&#x5C01;&#x9762;&#x4E3A; &#x1F447;</p>
<p><img src="public/docs/notFound-other.png" alt="notFound-other"></p>
<br>
<br>
<h3 class="mume-header" id="25-tsx-%E6%94%AF%E6%8C%81httpsgithubcomvitejsvitetreemainpackagesplugin-vue-jsx">25. <a href="https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx"><code>tsx</code> &#x652F;&#x6301;</a></h3>

<p>&#x53EA;&#x9700;&#x8981; <code>tsx</code> &#x6587;&#x4EF6;&#x653E;&#x5728; <code>src/components</code> &#x4E0B;&#xFF0C;&#x5373;&#x53EF;&#x76F4;&#x63A5;&#x5728;&#x6A21;&#x677F;&#x4E2D;&#x4F7F;&#x7528;&#x3002;</p>
<p>&#x4F8B;&#x5982;&#x4F60;&#x6709;&#x4E00;&#x4E2A; <code>src/components/foo.tsx</code> &#x6587;&#x4EF6;&#xFF0C;&#x90A3;&#x4E48;&#x5373;&#x53EF;&#x76F4;&#x63A5;&#x5728;&#x6A21;&#x677F;&#x4E2D;&#x4F7F;&#x7528;&#x3002;</p>
<pre data-role="codeBlock" data-info="tsx" class="language-tsx"><span class="token comment">// src/components/foo.tsx</span>
<span class="token keyword keyword-export">export</span> <span class="token keyword keyword-default">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword keyword-return">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token maybe-class-name">Test</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre><pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>foo</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</pre><p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx">@vitejs/plugin-vue-jsx</a></p>
<br>
<br>
<h3 class="mume-header" id="26-gzip-%E8%B5%84%E6%BA%90%E5%8E%8B%E7%BC%A9%E6%94%AF%E6%8C%81httpsgithubcomvbenjsvite-plugin-compression">26. <a href="https://github.com/vbenjs/vite-plugin-compression"><code>gzip</code> &#x8D44;&#x6E90;&#x538B;&#x7F29;&#x652F;&#x6301;</a></h3>

<p>&#x751F;&#x4EA7;&#x73AF;&#x5883;&#x4E0B;&#x5F00;&#x7BB1;&#x5373;&#x7528;&#x7684; <code>gzip</code> &#x8D44;&#x6E90;&#x538B;&#x7F29;&#xFF0C;&#x65E0;&#x9700;&#x914D;&#x7F6E;&#x3002;</p>
<p>&#x5177;&#x4F53;&#x53EF;&#x89C1; &#x1F449; <a href="https://github.com/vbenjs/vite-plugin-compression">vite-plugin-compression</a></p>
<br>
<br>
<br>
<h3 class="mume-header" id="27-%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F%E9%85%8D%E7%BD%AE%E6%94%AF%E6%8C%81httpscnvitejsdevguideenv-and-modehtml">27. <a href="https://cn.vitejs.dev/guide/env-and-mode.html">&#x73AF;&#x5883;&#x53D8;&#x91CF;&#x914D;&#x7F6E;&#x652F;&#x6301;</a></h3>

<p>&#x6839;&#x76EE;&#x5F55;&#x4E0B;&#x6709;&#x4E09;&#x4E2A;&#x73AF;&#x5883;&#x53D8;&#x91CF;&#x914D;&#x7F6E;&#x6587;&#x4EF6; <code>.env</code>&#xFF0C;<code>.env.development</code> &#x548C; <code>.env.production</code> &#x7528;&#x6765;&#x5BF9;&#x9879;&#x76EE;&#x8FDB;&#x884C;&#x914D;&#x7F6E;&#x3002;</p>
<br>
<br>
<br>
<h2 class="mume-header" id="license">License</h2>

<p>Made with markthree</p>
<p>Published under <a href="./LICENSE">MIT License</a>.</p>
<br>

      </div>
      
      
    
    
    
    
    
    
    
    
  
    </body></html>